import { useIntl } from '@umijs/max';
import ReactEcharts from 'echarts-for-react';
import React, { useEffect, useRef, useState } from 'react';

const Chart: React.FC<{
  pageData: API.ProblemChartResponse;
}> = ({ pageData }) => {
  const intl = useIntl();
  const tableRef = useRef<any>();
  const [chartWidth, setChartWidth] = React.useState(0);
  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.target === tableRef?.current) {
          setChartWidth(tableRef?.current?.getBoundingClientRect()?.width);
        }
      }
    });

    if (tableRef?.current) {
      resizeObserver?.observe(tableRef?.current);
    }

    return () => {
      if (tableRef?.current) {
        resizeObserver?.unobserve(tableRef?.current);
      }
    };
  }, []);

  const [pageNum, setPageNum] = useState(0);

  useEffect(() => {
    setPageNum(chartWidth / 45);
  }, [pageData, chartWidth]);

  const isEmpty = pageData?.xaxis?.[0]?.data?.length === 0;
  const len = (pageData?.xaxis?.[0]?.data || []).length;

  return (
    <div ref={tableRef}>
      <ReactEcharts
        style={{ height: 430, marginTop: 20 }}
        option={{
          dataZoom: [
            {
              // 设置滚动条的隐藏与显示
              show: len > 5 && len > pageNum,
              // 设置滚动条类型
              type: 'slider',
              // 设置背景颜色
              //backgroundColor: "rgb(19, 63, 100)",
              // 设置选中范围的填充颜色
              //fillerColor: "rgb(16, 171, 198)",
              // 设置边框颜色
              //borderColor: "rgb(19, 63, 100)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue: 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: pageNum,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: 'empty',
              // 设置滚动条宽度，相对于盒子宽度
              width: '94%',
              // 设置滚动条高度
              height: 8,
              // 设置滚动条显示位置
              left: 'center',
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 0,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 12,
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: 'inside',
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            },
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: pageData?.unit
              ? function (params) {
                  let text = `<div>
              ${params[0].axisValueLabel}<br/>`;
                  (params || []).forEach((item) => {
                    text += `${item.marker}${item.seriesName}&nbsp;:&nbsp;&nbsp;${
                      item.value ?? ''
                    }`;
                    if (item.value || item.value === 0) {
                      text += `${pageData?.unit}<br/>`;
                    } else {
                      text += '<br/>';
                    }
                  });
                  text += '</div>';
                  return text;
                }
              : null,
          },
          legend: {
            left: 'right',
          },
          grid: {
            left: 20,
            right: 80,
            bottom: 20,
            containLabel: true,
          },
          // dataZoom: {
          //   type: 'inside',
          // },
          xAxis: [
            {
              type: 'category',
              name: pageData?.xaxis?.[0]?.name,
              nameTextStyle: {
                //y轴上方单位的颜色
                color: '#222',
              },
              data: pageData?.xaxis?.[0]?.data || [],
              axisTick: {
                alignWithLabel: true,
                show: true,
                inside: true, //刻度内置
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisLabel: {
                color: '#222',
                rotate: (pageData?.xaxis?.[0]?.data || []).some((ele) => ele && ele.length > 4)
                  ? 30
                  : 0,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: pageData?.yaxis?.[0]?.name || '',
              nameTextStyle: {
                //y轴上方单位的颜色
                color: '#222',
                align: 'left',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisTick: {
                show: true,
                inside: true,
              },
              splitLine: {
                show: !isEmpty,
                lineStyle: {
                  type: 'dashed',
                },
              },
              axisLabel: {
                color: '#222',
              },
            },
          ],
          series: (pageData?.seriesData || []).map((item) => {
            item.barWidth = '50%';
            item.barMaxWidth = 30;
            return item;
          }),
          graphic: [
            {
              type: 'image',
              silent: true,
              style: {
                image: require('@/assets/img/empty.png'),
                width: 180,
                height: 120,
              },
              bounding: 'raw',
              top: 'center',
              left: 'center',
              invisible: !isEmpty,
            },
            {
              type: 'text', // 类型：文本
              left: 'center',
              top: 260,
              silent: true, // 不响应事件
              invisible: !isEmpty, // 有数据就隐藏
              style: {
                fill: '#222',
                text: intl.formatMessage({ id: 'global.noDataYet' }),
                fontFamily: 'Microsoft YaHei',
                fontSize: '14px',
              },
            },
          ],
        }}
      />
    </div>
  );
};
export default Chart;
